/**
 * @Date 2023-03-22 11:16:21
 * @Remark
 */

// react
import React, {useRef } from "react";
// lib
import { Editor } from "@tinymce/tinymce-react";
import { uploadFileService } from "biz/File/service";
// style
import "../style.scss";
// controller
// import fileUtils from "utils/fileUtils";
// import logic from "./logic";
// interface

/**
 * https://www.tiny.cloud/docs/tinymce/6/react-ref/#event-binding
 */
function TextEditor(props: {
  initialValue?: string;
  placeholder?: string;
  disabled?: boolean;
  onEditorChange?: (text: string) => void;
  onChange?: (text: string) => void;
}) {
  const { initialValue, placeholder, disabled, onEditorChange, onChange } =
    props;

  const editorRef = useRef<any>(null);

  // useEffect(() => {
  //   logic.init();
  //   return () => {
  //     logic.setCallback(null);
  //   };
  // }, []);

  return (
    <Editor
      tinymceScriptSrc={"/tinymce/tinymce.min.js"}
      onEditorChange={(text) => {
        onEditorChange && onEditorChange(text);
      }}
      onChange={() => {
        onChange && onChange(editorRef.current.getContent());
      }}
      onInit={(e, editor) => {
        editorRef.current = editor;
      }}
      initialValue={initialValue}
      disabled={disabled}
      init={{
        placeholder: placeholder || "请输入内容",
        height: 500,
        menubar: false, // 是否显示menubar
        statusbar: true, // 是否显示statusbar
        branding: false, // 是否显示品牌标识
        elementpath: false, // 是否显示元素路径
        language: "zh-Hans",
        plugins: ["autolink", "lists", "image", "media", "wordcount"],
        toolbar: [
          "undo redo | blocks | fontfamily | fontsize | bold italic forecolor",
          "alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent | removeformat | image | media",
        ],
        // https://www.tiny.cloud/docs/tinymce/6/user-formatting-options/#font_size_input_default_unit
        font_family_formats:
          "Arial=arial,helvetica,sans-serif; 黑体='黑体',SimHei; 仿宋='仿宋','仿宋_GB2312',FangSong_GB2312; 楷体='楷体','楷体_GB2312',KaiTi_GB2312; Times New Roman=times new roman,times",
        font_size_formats: "10px 12px 14px 16px 18px 32px 36px",
        font_size_input_default_unit: "px",
        content_style: "body { font-size:14px }",
        file_picker_types: "media", // 只在视频上传中使用
        image_uploadtab: true,
        // 自定义图片上传处理方法
        images_upload_handler: async (blobInfo, progress) => {
          const result = await uploadFileService(
            blobInfo.blob(),
            blobInfo.filename(),
          );
          if (result.payload) {
            return result.payload.url;
          }
          return "";
        },
        file_picker_callback: async (callback, value, meta) => {
          // 如果是视频media
          // if (meta.filetype === "media") {
          //   logic.setCallback(callback);
          //   const files = await fileUtils.fileUpload();
          //   logic.aliyunUploadVideo(files[0]);
          //   return;
          // }
          // callback("");
        },
      }}
    />
  );
}

export default TextEditor;
